import { themes } from './colors'
// 样式主题对应地图主题
const mapThemeList = {
  dark: 'blue', // 靛青蓝
  light: 'normal' // 标准
}
// 修改页面中的样式变量值
const changeStyle = (obj, themeName) => {
  const dom = document.getElementsByTagName('html')[0]
  if (themeName !== 'dark') {
    dom.classList.add('light')
    dom.classList.remove('dark')
  } else {
    dom.classList.add('dark')
    dom.classList.remove('light')
  }
  for (let key in obj) {
    dom.style.setProperty(`${key}`, obj[key])
  }
}

// 改变主题的方法
export const toggleTheme = (themeName) => {
  const themeConfig = themes[themeName]
  changeStyle(themeConfig, themeName)
  // 地图主题切换
  try {
    window.localStorage.setItem('map-theme-name', mapThemeList[themeName] || 'normal')
    // 解决通页面无法监听storage变更问题
    window.dispatchEvent(new Event('storage'))
  } catch {
    console.log('%c设置地图主题失败', 'color:red;background:#000')
  }
}
